<template>
    <div class="bigIcon" v-loading="isloading">
        <ul v-if="data.length>0">
            <li
                    v-for="item in data"
                    :key="item.id"
                    @contextmenu.prevent="show($event,item)"
                    id="tar">
                <span :class="'file-icon '+item.iconcls" class="icon"></span>
                <el-tooltip
                        class="item"
                        effect="dark"
                        :content="item.fileName"
                        placement="bottom"
                        v-if="item.fileName && abslength(item.fileName) > 28">
                    <p class="name" @click="handleColClick(item)">{{ item.fileName.substring(0,28)+'...'}}</p>
                </el-tooltip>
                <p  class="name" v-else @click="handleColClick(item)">{{item.fileName}}</p>
                <div class="folder-box-options">
                    <el-popover placement="right" class="setting" trigger="hover" v-show="item.isFavorites != undefined">
                        <ul class="settingOptions">
                            <li @click="downloadFile(item)" v-show="item.fileType == '0'">
                                <i class="fa fa-cloud-download" aria-hidden="true"></i>下载
                            </li>
                            <li @click="previewFile(item)" v-show="item.fileType == '0'">
                                <i class="fa fa-eye" aria-hidden="true"></i>预览
                            </li>
                            <li @click="collectFile(item)" v-show="item.isFavorites == '0' && isCollect">
                                <i class="fa fa-star-o" aria-hidden="true" ></i>收藏
                            </li>
                            <li @click="collectFile(item)" v-show="item.isFavorites == '1'">
                                <i class="fa fa-star" aria-hidden="true" ></i>取消收藏
                            </li>
                        </ul>
                        <i slot="reference" class="iconfont" style="cursor: pointer;" @click.stop>&#xe679;</i>
                        <!--<i slot="reference" class="el-icon-more-outline" style="cursor: pointer;" @click.stop></i>-->
                    </el-popover>
                </div>
            </li>
        </ul>
        <div class="title"
             v-else
             style="height:100%;width:100%;display: flex;margin-top:15%;align-items: center;flex-direction: column">
            <img src="../assets/img/file/no1.png" alt="">
            <el-row style="font-size:18px;color:#B4B4B4;margin-top:9px;">暂无内容</el-row>
            <el-row style="font-size:14px;color:#B4B4B4;margin-top:10px;">请联系管理员或去其他地方看看吧</el-row>
        </div>
        <ul id="Right" v-show="false">
            <li @click="collectFile" v-show="!starshow">
                <i class="fa fa-star-o" aria-hidden="true" ></i>收藏
            </li>
            <li @click="collectFile" v-show="starshow">
                <i class="fa fa-star" aria-hidden="true" ></i>取消收藏
            </li>
        </ul>
        <div class="download-box" v-if="$store.state.groupDownBox==1">
          <span class="smaller-icon" @click="$store.commit('setGroupDownBox',2)"><i class="fa fa-compress" aria-hidden="true"></i></span>
        <span>正在下载中：</span><span style="color:red" @click="stopDownload"><i class='el-icon-circle-close'></i></span><br>
        <el-progress :percentage='$store.state.groupLoadingList[0].percentComplete' :show-text="true"></el-progress>
    </div>
    <div class="download-box-small" v-if="$store.state.groupDownBox==2">
      下载中：<span @click="$store.commit('setGroupDownBox',1)"><i class="fa fa-expand" aria-hidden="true"></i></span>
    </div>
    </div>
</template>
<script>
    export default {
        name: "bigIcon",
        props:{
            tableData:Array,
            rightMenu:Boolean,
            isGroup:Boolean,
            isCollect:Boolean
        },
        data(){
            return{
                showRight:false,
                data:[],
                isloading:false,
                tempFile:"",
                starshow:true
            }
        },
        mounted(){
            this.isloading = true;
            setTimeout (this.initData,500);
        },
        watch:{
            tableData:{
                handler: function (newVal, oldVal) {
                    if(newVal !== oldVal){
                        this.isloading = true;
                        console.info('value changed ', newVal)
                        setTimeout (this.initData,500);
                    }
                }
            },
          data:{
            handler: function (newVal, oldVal) {
              if(newVal !== oldVal){
                console.log("data changed")
              }
            },
            deep:true,
          }
        },
        methods:{
            abslength( str ) {
                return str.replace(/[^\x00-\xff]/ig, '**').length;
            },
            /**
             * 收藏/取消收藏文件
             */
            collectFile(data){

                this.$http.get('/favorites/clickCollection',{
                    params:{
                        id:data.id
                    }
                }).then(res=>{
                    if(res.status == 200){
                        this.$message({
                            message:res.msg,
                            type:"success"
                        });
                        data.isFavorites=="0"? data.isFavorites = "1" : data.isFavorites = "0";
                    }else {
                        this.$message.error("操作失败")
                    }
                })
            },
          getBlob(url) {
            return new Promise(resolve => {
              const xhr = new XMLHttpRequest();
              xhr.open("GET", url, true);
              xhr.responseType = "blob";
              xhr.onload = () => {
                if (xhr.status === 200) {
                  resolve(xhr.response);
                }
              };
              xhr.send();
            });
          },
            /**
             * 获取文件类型
             * @param file
             */
            getType(file) {
                console.log(file);
                var filename = file;
                var index1 = filename.lastIndexOf(".");
                var index2 = filename.length;
                var type = filename.substring(index1 + 1, index2);
                console.log(type);
                return type;
            },
            /**
             * 预览文件
             */
            previewFile(file){
              let arr = ["png","jpg","pdf","gif","txt"];
              if (arr.indexOf(this.getType(file.fileName)) != -1) {
                if(this.$store.state.ipfsArray==0){
                  this.$message.error('获取请求路径失败,请检查网络或呼叫管理员');
                }else{
                  this.getBlob(this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
                    this.imgurl = window.URL.createObjectURL(blob);
                    console.log(this.imgurl)
                    if(this.imgurl != ""){
                      window.open(this.imgurl,"_blank")
                    }
                  });
                }
              } else if(file.suffix.toLowerCase() == "mp4" || file.suffix.toLowerCase() == "webm" || file.suffix.toLowerCase() == "ogg" ){
                let url = this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash;
                console.log(url);
                var page = window.open();
                var html=`<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style='width:980px;height: 480px'>
                            <video  style='width:980px;height: 480px' controls width='100%' autoplay id="playVideo">
                                <source class="source" src=${url} type="video/mp4">
                            </video>
                        </div>
                    </body>`
                page.document.write("<title>视频预览</title>"+html);
              }else if(file.suffix.toLowerCase() == "flv"){
                let url = this.$store.state.ipfsArray[1]+'ipfs/'+file.fileHash;
                console.log(url);
                let data = url;
                let data1 = "vcastr_file="+data+"&LogoText=ÊÓÆµ²¥·ÅÆ÷&BufferTime=3&IsAutoPlay=1";
                let data2 = "vcastr_file="+data+"&LogoText=ÊÓÆµ²¥·ÅÆ÷&IsAutoPlay=1";
                var page = window.open();
                var html=`<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;background: black">
                            <object class id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=${data} width="980" height="480" style="border: 1px solid #549de8">
                                <param name="movie" value="/static/flvplayer.swf">
                                <param name="quality" value="high">
                                <param name="allowFullScreen" value="true">
                                <param name="FlashVars" value=${data1}>
                                <embed src="/static/flvplayer.swf" allowfullscreen="true" flashvars=${data2} quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="480"></embed>
                            </object>
                        </div>
                    </body>`
                page.document.write("<title>视频预览</title>"+html);
                // let routeUrl = this.$router.resolve({
                //   path: "/videoPlay",
                //   query: {url:url}
                // });
                // window.open(routeUrl.href, '_blank');
              }else{
                this.$message("当前文件不支持预览，请下载查看");
              }
            },
            // previewFile(){
            //     let arr = ["png","jpg","pdf","gif","txt"];
            //     if (arr.indexOf(this.getType(this.tempFile.fileName)) != -1) {
            //         this.$http.get("/getApi/gatewayByType",{
            //           params:{
            //             type:sessionStorage.getItem("netEnv"),
            //             hash:this.tempFile.fileHash
            //           }
            //         }).then(res => {
            //             console.log(res.data);
            //             this.imgurl = res.data;
            //             if(this.imgurl != ""){
            //                 window.open(this.imgurl,"_blank")
            //             }
            //         });
            //     } else {
            //         this.$message("该类型文件暂不支持预览,请右键下载查看");
            //     }
            // },
            /**
             * 下载文件
             */
            downloadFile(data){
                console.log("debug",this.tempFile);
                this.$emit("downloadFile",data);
            },
            stopDownload(){
                this.$emit("stopDownload");
            },
            /**
             * 初始化数据
             */
            initData(){
              console.log(this.tableData)
                let data = this.tableData;
                this.data = [];
                if(data === null){
                    return;
                }
                data.forEach((val,key)=>{
                    // console.log(val);
                  if(val.isFavorites == undefined){
                    this.starshow = false;
                  }
                    let icon = 'icon_list_' + val.suffix;
                    if(val.fileType == 1){
                        val.iconcls = "icon_list_folder";
                    }else{
                        val.iconcls = icon;
                    }
                })
                this.data = data;
                this.isloading = false;
                // console.log("data0",data);
            },
            handleColClick(row) {
                // if(row.fileType == 0){
                //     var forRight=document.getElementById("testRight");
                // }else{
                //     if(this.isCollect){
                //         var forRight=document.getElementById("Right");
                //     }
                // }
                // forRight.style.display="none";
                this.$emit("handleCellClick",row)
            },
        }
    }
</script>

<style scoped lang="scss">
    .bigIcon{
        width: 100%;
        height: 100%;
        .download-box{
        position: fixed;
        z-index: 10;
        bottom: 20px;
        right: 20px;
        width: 330px;
        padding: 14px 26px 14px 13px;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    .smaller-icon{
      position: absolute;
      right:5px;
      top:10px;
    }
      }
      .download-box-small{
      position: fixed;
      z-index: 20;
      bottom: 20px;
        right: 20px;
        border: 1px solid #ebeef5;
    background-color: #549DE8;
    width: 70px;
    border-radius: 4px;
    padding: 5px 8px 5px 5px;
    }
        .file-icon{
            background: url("/static/bigicon.png") no-repeat -196px 0px;
            display: inline-block;
            width: 28px;
            height: 29px;
        }
        ul{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top:20px;
            /*margin-left: 20px;*/
            li{
                box-sizing: border-box;
                border:1px solid #F6F6F6;
                margin-bottom:20px;
                margin-left:20px;
                width: 256px;
                height: 54px;
                display: flex;
                align-items: center;
                position: relative;
                .icon{
                    margin-left: 21px;
                }
                .shareicon{
                    position: absolute;
                    bottom:30px;
                    right: 0px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    opacity: 0;
                    i{
                        margin:5px 0;
                    }
                }
                .name{
                    margin-left:10px;
                    width: 160px;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap
                }
                .name:hover{
                    text-decoration: underline;
                }
            }
            .iconfont{
                margin-right: -5px;
                display: none;
            }
            li:hover{
                border:1px solid #549DE8;
                box-sizing: border-box;
                cursor: pointer;
            }
            li:hover .iconfont{
                display: block;
            }
            li:hover .shareicon{
                opacity: 1;
            }
        }
        .title{
            margin-top:30px;
            font-size: 14px;
            color:#ccc;
            display: flex;
            height: 100%;
            justify-content: center;
        }
    }
</style>
